<template>
    <ul :class="{'box_ul_ul':true,'smooth_1':smooth,'smooth_2':smooths}"  id="space">
        <li id="li_" @click="smooth_" :class="{'pull_down':true,'pull_down_r':pull_down_r}">
            <img src="../../../public/static/nav/kehu2C.png" alt="">私密空间</li>
        <li ><router-link class="li_li" to="/blessingMessage">
            <img src="../../../public/static/zhufuliuyan.png" alt="">祝福留言</router-link></li>

        <li ><router-link class="li_li" to="/privateSpace">
            <img src="../../../public/static/diandi.png" alt="">点点滴滴</router-link></li>

        <li ><router-link class="li_li" to="/loveEvents">
            <img src="../../../public/static/yueding.png" alt="">承诺约定</router-link></li>
    </ul>
</template>

<script>
export default {
    name: "PrivateSpace",
    data(){
        return{
            ul_h:"",
            smooth:false,
            smooths:false,
            pull_down_r:false,
        }
    },
    mounted() {
        this.li_();
        this.li_li();

    },
    methods:{
        site_(){
            this.$router.push('/websiteAdministration');
        },
        operationalLogs(){
            this.$router.push('/operationalLogs');
        },
        home(){
            this.$router.push('/home');

        },
        smooth_(){
            if( !this.smooth && !this.smooths){
                this.smooth = true;
                this.smooths = false;
            }else {
                this.smooth = !this.smooth;
                this.smooths = !this.smooths;
            }
            this.pull_down_r = !this.pull_down_r
        },
        li_(){
            let li_ = document.querySelectorAll("#li_");
            for(let i = 0;i<li_.length;i++){
                li_[i].addEventListener("click",()=>{
                    for(let j =0;j<li_.length;j++){
                        li_[j].style.background = "";
                    }
                    li_[i].style.background = "#44bed3";
                    let li_li = document.querySelectorAll(".li_li");
                    li_li[0].style.background = "rgba(94, 94, 96, 0.38)";
                    for(let k = 0;k<li_li.length;k++) {
                        li_li[k].style.background = "";
                        li_li[k].style.color = " #8f8c8c";
                    }
                })
            }
        },
        li_li(){
            let list = document.querySelector("#list");
            let  space = document.querySelector("#space");
            let li_ = document.querySelectorAll("#li_");
            let li_li = document.querySelectorAll(".li_li");
            li_li[0].style.background = "rgba(94, 94, 96, 0.38)";
            for(let i = 0;i<li_li.length;i++){
                li_li[i].addEventListener("click",()=>{
                    for(let j =0;j<li_li.length;j++){
                        li_li[j].style.background = "";
                        li_li[j].style.color = " #8f8c8c";
                    }
                    li_li[i].style.background = "rgba(94, 94, 96, 0.38)";
                    li_li[i].style.color = "#fff";
                    for(let j =0;j<li_.length;j++){
                        li_[j].style.background = "";
                    }
                })
                space.addEventListener("click",()=>{
                    space.firstChild.style.background = "#44bed3";
                })


            }


        },
    }
}
</script>

<style scoped>
a{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #8f8c8c;
}
.box_{
    width: 100%;
}
.box_ .box_ul{
    width: 100%;
    list-style: none;
    padding: 10px 0;

}
.box_ .box_ul li{
    list-style: none;
    min-height: 45px;
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding-left: 0 !important;
    color: white;
    transition: all .2s;
}
.box_ .box_ul li img{
    margin:0 5px 0 8px;
    width: 20px;
}
.box_ .box_ul li:hover{
    cursor: pointer;
    background: rgba(94, 94, 96, 0.38);
}
/*.box_ul li:nth-child(2):hover{*/
/*    background:transparent;*/
/*}*/
/*.box_ .box_ul li:nth-child(2){*/
/*    padding: 0;*/
/*}*/
.box_ .box_ul li:last-child{
    margin-bottom: 0;
}
.box_ul_ul{
    width: 100%;
    list-style: none;
    margin: 0;
    padding-left: 0 !important;
    height: 45px;
    overflow: hidden;
}

.box_ul_ul li{
    position: relative;
    width: 100%;
    height: 45px;
    z-index: 9999;
    padding-left: 0 !important;
    margin-bottom: 5px !important;
}

.smooth_1{
    animation: smooth_1 .3s ease-in-out 0s 1 forwards ;
}
.smooth_2{
    animation: smooth_2 .3s ease-in-out 0s 1 forwards ;
}
@keyframes smooth_1 {
    0%{
        height: 45px ;
    }
    100%{
        height: 190px !important;
    }
}
@keyframes smooth_2 {
    0%{
        height: 190px !important;
    }
    100%{
        height: 45px;
    }
}

.pull_down::after{
    position: absolute;
    right: 5%;
    top: 50%;
    content: "";
    display: inline-block;
    width: 12px;
    height:12px;
    border-left: 2px solid #fdf9f9;
    border-bottom: 2px solid #fcfafa;
    border-top: 0;
    border-right: 0;
    transform-origin: center;
    transform: rotate(-135deg) translateY(50%);
    transition: all 0.3s;
}

.pull_down li a{
    color: #8f8c8c !important;
}
.pull_down li a:hover{
    color: #1193e1 !important;
}

.pull_down_r:after{
    transform: rotate(-45deg);
    margin-top: -8px;
}
</style>